<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图形随机验证码</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
body{background:#036; color:#fff; font-size:24px;}
ul{
	width:756px;
	margin:100px auto;
	clear:both;
}
ul li{
	float:left;
	width:250px;
	height:100px;
	line-height:100px;
	border:1px solid #ccc;
	text-align:center;
}
span{
	display:inline-block;
	vertical-align:middle;
}
#wz{cursor: pointer;}
</style>
<script type="text/javascript">
window.onload=function(){
	var wz=document.getElementById("wz");
	var num;//随机数字
	var pic="";//随机图片路径
	wz.onclick=function(){
	var img="";
		for(var i=0;i<4;i++){
			num=Math.floor(Math.random()*10);
			pic="<img src='images/"+num+".png' />";
			img=img+pic;
	}
	var oCode=document.getElementById('code');
	oCode.innerHTML=img;
  }
}
</script>
</head>
<body>
<ul>
	<li>验证码</li>
	<li><input name="textfield" type="text" id="textfield" size="10" style="height:35px; vertical-align:middle" /> &nbsp;
		<span id="code">
			<img src="images/1.png" alt="" /><img src="images/2.png" alt="" /><img src="images/3.png" alt="" /><img src="images/4.png" alt="" />
		</span>
	</li>
	<li id="wz"><input type="button" value="看不清，换一张" /></li>
</ul>
</body>
</html>
